<template>
  <view class="loginbox">
	<image class="gb" src="../../static/img/login-bg.png" mode=""></image>
	<view class="dl_bg">
		<view class="top">
			 <view class="title">登录</view>
			<view class="form">
				  <view class="user">
					  <view class="iconfont icon-yonghuming"></view>
					  <input v-model="userdata.username" type="text" placeholder="用户名" maxlength="13" placeholder-class="place"/></view>
				  <view class="password">
					  <view class="iconfont icon-mima"></view>
					  <input v-model="userdata.password"  type="password" placeholder="密码" maxlength="13"  placeholder-class="place"/>
				</view>
				<view class="button">
					 <view class="wj" @click="gozc">
					 	没有账号？
					 </view>
					 <view class="loginbotton" @click="gologin">登录</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			 <view class="icon">
			 	<view  @click="slogin">
			 		<view class="iconfont icon-weixin" style="color:#4ad574;" ></view>微信一键登录
			 	</view>
			 </view>
		</view>
	</view>
	<image class="xx" src="../../static/img/login-xx.png" mode="aspectFill"></image>
  </view>
  <uni-popup  ref="popup" type="bottom" border-radius="10px 10px 0 0" :is-mask-click="false" mask-background-color="rgba(0,0,0,0)">
	  <view class="popbox">
	  	<view class="title"><text>房屋租赁小程序</text>  申请</view>
		<view class="con">获取你的昵称、头像、地区及性别</view>
		<view class="userinfo">
			<image class="l" :src="userinfo.avatarUrl" mode=""></image>
			<view class="r">
				<view class="r_t">{{userinfo.nickName}}</view>
				<view class="r_b">微信个人信息</view>
			</view>
		</view>
		<view class="buttonbox">
			<view class="no" @click="quxiao">取消</view>
			<view class="ok" @click="yunxu">允许</view>
		</view>
	  </view>
  </uni-popup>
</template>

<script setup>
	import {onBackPress,onHide} from '@dcloudio/uni-app'
	import {ref} from 'vue'
	const popup=ref()
	import {getuserlogin,getdslogin} from '@/api/index.js'
	import userstore from '@/store/userlogin.js'
	const useuserstore=userstore()

	onHide(()=>{  
		    popup.value.close()
	})
	const userdata=ref({
		  username:"",
		  password:""
	})
	const userinfo=ref({
		nickName:"",
		avatarUrl:""
	})
	const phonelogin=(data)=>{
		console.log(data)
	}
	const quxiao=async(id)=>{
		   popup.value.close()
	}
	const yunxu=()=>{
		uni.login({
			provider:"weixin",
		    success(data) {
			getdslogin(data.code,"weixin",userinfo.value).then(data=>{
				if(data.code==200){
					useuserstore.userlogin=data.data
					useuserstore.token=data.token
					console.log(data)
					uni.showToast({
						title:data.msg,
						icon:"none"
					})
					uni.reLaunch({
						url:"/pages/index/index"
					})
					return
				}
				popup.value.close()
			})
			}
		})
	}
	const slogin=()=>{
		           uni.getUserProfile({
		           	desc:"微信你登录",
		             	success(userinfos) {
		           		userinfo.value=userinfos.userInfo
		           	  	popup.value.open()
		           	}
		           })
	}
	const gozc=()=>{
		 uni.navigateTo({
		 	url:"/pages/zc/zc"
		 })
	}
	const gologin=async()=>{
		 if(!userdata.value.username.trim() || !userdata.value.password.trim()){
		 			    uni.showToast({
		 			    	title:"账号或密码不能为空！",
		 					icon:"none"
		 			    })
		 	return
		   }
		  if(userdata.value.username.trim().length < 4 || userdata.value.password.trim().length < 4){
		 	    uni.showToast({
		 	    	title:"账号或密码不小于4位！",
		 			icon:"none"
		 	    })
		 	return
		  }
		 const rudata=await getuserlogin(userdata.value.username.trim(),userdata.value.password.trim())
		 if(rudata.code==200){
			 useuserstore.userlogin=rudata.userdata
			 useuserstore.token=rudata.token
			 console.log(rudata)
			 uni.showToast({
			 	title:rudata.msg,
			 	icon:"none"
			 })
			 uni.reLaunch({
			 	url:"/pages/index/index"
			 })
		 }else{
			 uni.showToast({
			 	title:rudata.msg,
			 	icon:"none"
			 })
		 }
	}
</script>

<style lang="scss" scoped>
	.popbox{
		height: 27vh;
		width: 100%;
		border-radius: 50rpx 50rpx 0 0;
		background-color: #fff;
		padding: 10rpx  20rpx 0 20rpx;
		.title{
			height:10% ;
			font-size: 25rpx;
			color:#000;
			display: flex;
			align-items: center;
			text{
				margin-right: 20rpx;
                 color: #7b7b7b;
			}
		}
		.con{
			height: 20%;
			display: flex;
			align-items: center;
			font-size: 35rpx;
			font-weight: 700;
		}
		.userinfo{
			 display: flex;
			 height: 40%;
			 width: 100%;
			 align-items: center;
			 .l{
				 height:100rpx;
				 width: 100rpx;
				 margin-right: 10rpx;
			 }
			 .r{
				 height: 100rpx;
				 view{
					 height: 50%;
					 line-height: 50rpx;
				 }
				 .r_t{
				 	font-size: 32rpx;
				 }
				 .r_b{
					 font-size: 20rpx;
					 color:#7b7b7b;
				 }
			 }
		}
		.buttonbox{
			height: 30%;
			display: flex;
			justify-content: space-between;
			view{
				width: 43%;
				height: 65%;
				background-color: red;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
			}
			.no{
				background-color: #ededed;
			}
			.ok{
				background-color: #1aac17;
				color:#fff;
			}
		}
	}
	.loginbox{
		height: 100vh;
		width: 100vw;
		position: relative;
		.gb{
			position: absolute;
	     	top: 0;
		    left: 0;
			height: 100%;
			width: 100%;
		}
		.dl_bg{
			position: absolute;
			height: 1074rpx;
			width: 100%;
			bottom: 0;
			background-color: rgba(255, 255, 255, 0.5);
			backdrop-filter:blur(10rpx);
			border-radius: 50rpx 50rpx 0 0;
			z-index: 2;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 90rpx 55rpx 0 55rpx;
			.top{
				height: 600rpx;
				.title{
					height: 140rpx;
					font-size: 55rpx;
					font-weight: 700;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.form{
					height: 270rpx;
					width: 100%;
					border-radius: 26rpx;
					background-color: #fdfdfd;
					padding: 0 25rpx;
					:deep(.place){
							 font-size: 30rpx;
						 color: #b1b2bd;
					}
					.button{
						height: 160rpx;
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.wj{
							color: #969cf5;
							font-size: 25rpx;
						}
						.loginbotton{
							width: 290rpx;
							height: 110rpx;
							background-color: #0d2b44;
							color: #fff;
							border-radius: 110rpx;
						}
					}
					>view{
						height: 50%;
						display: flex;
						align-items: center;
						 view{
							 display: flex;
							 align-items: center;
							 justify-content: center;
							  margin-right:20rpx ;
						 }
					}
					.user{
						view{
							height: 70rpx;
							width: 70rpx;
							background-color: #ffebe4;
							color: #f89c30;
							border-radius: 50%;

						}
						border-bottom: 1rpx solid #eee;
					}
					.password{
						view{
							height: 70rpx;
							width: 70rpx;
							background-color: #ebecff;
							color: #adacf5;
							border-radius: 50%;

						}
					}
				}
			}
			.bottom{
				height: 250rpx;
				padding: 0 55rpx;
				position: relative;
				.icon{
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					>view{
						height: 100rpx;
						width: 90%;
						background-color: #4ad574;
						border-radius: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
                        .iconfont{
							font-size: 50rpx;
							padding-right: 10rpx;
							color: #fff !important;
						}
					}
				}
			}
		}
		.xx{
			position: absolute;
			height: 400rpx;
			width: 450rpx;
		    top: 220rpx;
			left: 50%;
			transform: translate(-50%);
			z-index: 3;
			animation: move 5s linear infinite;
		}
		@keyframes move {
			0% {
				transform:translate(-50%)  rotate(0);
			}
			50%{transform:translate(-50%) rotate(5deg);}
			100%{transform:translate(-50%) rotate(0);}
		}
	}
</style>
